<style scoped lang="scss">
.custom-modal {
    margin: 0;
    & /deep/ {
        .el-dialog {
            max-width: 1200px;
        }
        .el-carousel.el-carousel--horizontal {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
        }
        .el-carousel__container,
        .el-carousel__item {
            height: 100%;
        }
    }
    .preview-card-box {
        position: relative;
        width: 100%;
    }
    .preview-card-img img {
        border-radius: 4px;
        overflow: hidden;
        border: none;
        width: 100%;
        max-width: 100%;
        vertical-align: bottom;
    }
}
</style>
<template>
    <el-dialog
        class="custom-modal"
        :title="title"
        :visible.sync="show"
        append-to-body
        top="10vh"
        @open="_open"
        @close="_close"
        @closed="_afterClose"
        v-auto-focus
        center
    >
        <div class="preview-card-box">
            <template v-if="Array.isArray(current) && current.length > 1">
                <el-card
                    class="preview-card-img"
                    :body-style="{ height: '100%', padding: '0px' }"
                >
                    <ask-image :src="current[cascaderIndex]" alt="图片"></ask-image>
                </el-card>
                <el-carousel
                    :interval="5000"
                    arrow="always"
                    @change="onCarouselChange"
                >
                    <el-carousel-item v-for="item in current" :key="item">
                        <el-card
                            class="preview-card-img"
                            :body-style="{ height: '100%', padding: '0px' }"
                        >
                            <ask-image :src="item" alt="图片"></ask-image>
                        </el-card>
                    </el-carousel-item>
                </el-carousel>
            </template>
            <template v-else>
                <el-card
                    class="preview-card-img"
                    :body-style="{ height: '100%', padding: '0px' }"
                >
                    <ask-image :src="Array.isArray(current) ? current[0] : current" alt="图片"></ask-image>
                </el-card>
            </template>
        </div>
    </el-dialog>
</template>
<script lang="ts">

import { Component, Vue } from "vue-property-decorator";

@Component
export default class AuditComponent extends Vue {
    show = false;
    ajaxLoader = false;
    ajaxIndex = 0;
    cascaderIndex = 0;
    list = [];
    current = "";
    title = "审核";

    _open() {
        this.$emit("onopen");
    }

    _close() {
        this.$emit("onclose");
    }

    _afterClose() {
        this.$nextTick(function() {
            this.$emit("onafterclose");
            this.$el.remove && this.$el.remove();
        });
    }

    loader(state: any) {
        if (state) {
            if (this.ajaxIndex === 0) this.ajaxLoader = true;
            this.ajaxIndex++;
        } else {
            setTimeout(() => {
                this.ajaxIndex--;
                if (this.ajaxIndex === 0) this.ajaxLoader = false;
            }, 300);
        }
    }

    close() {
        this.show = false;
    }

    onCarouselChange(val: any) {
        this.cascaderIndex = val;
    }
}
</script>
